import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/expert/expert_divide_logic.dart';
import 'package:ball_lion/utils/widget_utils.dart';
import 'package:ball_lion/module/expert/expert_page.dart';

import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class ExpertDividePage extends StatefulWidget {
  const ExpertDividePage({super.key});

  @override
  State<ExpertDividePage> createState() => _ExpertDividePageState();
}

class _ExpertDividePageState extends State<ExpertDividePage> {
  ExpertDivideLogic logic = Get.put(ExpertDivideLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ExpertDivideLogic>(builder: (logic) {
      return Stack(
        alignment: AlignmentDirectional.center,
        children: [
          TabBarView(
              physics: const NeverScrollableScrollPhysics(),
              controller: logic.controller,
              children:
                  List.generate(2, (index) => ExpertPage(sportsId: index + 1))),
          Positioned(bottom: 32, child: choiceBar())
        ],
      );
    });
  }

  Widget choiceBar() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(17),
              boxShadow: [
                BoxShadow(
                    offset: const Offset(0, 4),
                    color: Colours.main.withOpacity(0.1),
                    blurRadius: 4)
              ]),
          height: 34,
          child: Stack(
            children: [
              Positioned(
                left: 2,
                right: 2,
                top: 1,
                bottom: 1,
                child: Container(
                  height: 34,
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: Colours.main.withOpacity(0.4), width: 0.5),
                      borderRadius: BorderRadius.circular(17),
                      color: Colours.white),
                ),
              ),
              Row(children: [
                item('足球', 'top_zq.png', 0),
                item('篮球', 'top_lq.png', 1),
              ]),
            ],
          ),
        ),
      ],
    );
  }

  Widget item(String title, String selectImage, int index) {
    bool select = index == logic.tabIndex;
    return GestureDetector(
      onTap: () {
        logic.tabIndex = index;
        logic.controller.animateTo(index);
        Utils.onEvent("plan_ball_type",
            params: {"type": index == 0 ? "足球" : "篮球"});
        update();
      },
      child: Container(
        height: 36,
        width: 66,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(18),
          gradient: select
              ? const LinearGradient(
                  colors: [Color(0xFFF54D4F), Color(0xFFF53C6A)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter)
              : null,
        ),
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          if (select)
            Image.asset(
              Utils.getImgPath(selectImage),
              width: 16,
            ),
          const SizedBox(width: 2),
          QsText(title,
              color: select ? Colours.white : Colours.main, fontSize: 12)
        ]),
      ),
    );
  }
}
